import { getTemplate, getSlotTemplate, getStringTypeAttr } from '@/components/template'
import {Button} from '@/components/data'
var handle = function (_attr, _slots) {
  //定义默认属性
  let attributes = Button,
    slots = {
      default: [],
    }

  // 将修改后属性覆盖默认属性,以达到更新视图的效果

  Object.assign(slots, _slots)
  Object.assign(attributes, _attr)

  //根据组件不同需要做的不同操作

  /**
   * 获取插槽模板内容,例:
   * 各个组件嵌套在一起的template,如:
   * <Col>
   *    <Button id="27245661-3041"></Button>
   *    <Button id="27245661-3042"></Button>
   * </Col>
   */
  var subContent = getSlotTemplate(slots)
  /**
   * 如果当前组件属性有slot,且不是默认的,就设置为当前值,
   * 否则,设置为默认值
   */
  if (attributes.slot && attributes.slot !== 'default') {
    attributes.slot = {
      type: 'text',
      value: attributes.slot,
    }
  } else {
    attributes.slot = {
      type: 'text',
      value: '',
    }
  }

  /**
   * 字符串模板操作
   * 例: label="Button" :disabled="true"
   */
  let stringAttr = getStringTypeAttr(attributes)
  /**
   * 例:
   * <Button label="Button">
        Button
    </Button>
   */
  let template = `<Button ${stringAttr}>
                    ${subContent || attributes.label.value}
                  </Button>`

  //删除自定义非ui属性
  template = template.replace(`label="${attributes.label.value}"`, '')

  return { template, attributes, slots }
}
export default handle
